<template>
	<view>
		<view class="header">
			<view class="header-list">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入变量名称" @input="input"></uni-easyinput>
			</view>
			<view class="header-list">
				<uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
			</view>
			<view class="header-btn" @click="search()">查询</view>
		</view>
		<scroll-view
		  class="scrollBox"
		  scroll-y="true"
		  @scrolltolower="scrolltolower"
		>
		  <view class="orderCarList" v-if="orderList.length > 0">
			<view class="box" v-for="(item, index) in orderList" :key="index">
				<view class="list">
					<view class="list-name">设备名称</view>
					<view class="list-value">{{ item.deviceName }}</view>
				</view>
				<view class="list">
					<view class="list-name">变量名称</view>
					<view class="list-value">{{ item.variableName }}</view>
				</view>
				<view class="list">
					<view class="list-name">更新时间</view>
					<view class="list-value"><uni-dateformat :date="item.createTime"></uni-dateformat></view>
				</view>
				<view class="list">
					<view class="list-name">变量值</view>
					<view class="list-value">{{ item.variableValue }}</view>
				</view>
			</view>
		   
		  </view>
		  <view v-else class="orderNotCarList">
		    暂无数据
		  </view>
		</scroll-view>
		
		<view class="onLoad" v-if="onLoadBool">
			<uni-load-more iconType="auto" status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		getDetailUrl,
	} from '@/api/device.js'
	export default {
		data() {
			return {
				currPage: 1,
				pageSize: 10,
				hasNextPage: false,
				deviceId: '',
				orderList: [],
				deviceName: '',
				variableName: '',
				startDate: '',
				endDate: '',
				onLoadBool: false
			}
		},
		onLoad(e) {
			if (e.deviceName) {
				this.deviceName = e.deviceName
				this.getDetailPost()
			}
		},
		methods: {
			input(e) {
				this.variableName = e
			},
			maskClick(e){
				debugger
				this.startDate = e[0]
				this.endDate = e[1]
			},
			search() {
				this.orderList = []
				this.currPage = 1
				this.hasNextPage = false
				this.getDetailPost()
			},
			getDetailPost() {
				this.onLoadBool = true
				const obj = {
					deviceName: this.deviceName,
					variableName: this.variableName,
					startDate: this.startDate,
					endDate: this.endDate,
					currPage: this.currPage,
					pageSize: this.pageSize
				}
				getDetailUrl(obj).then(res =>{
					this.onLoadBool = false
					if (this.currPage * this.pageSize > res.total ) {
						this.hasNextPage = false
					} else {
						this.hasNextPage = true
					}
					this.orderList.push(...res.rows)
				})
			},
			scrolltolower() {
			  this.getNextPage()
			},
			getNextPage() {
			  if (this.hasNextPage) {
			    this.currPage++
			    this.getDetailPost()
			  }
			}
		}
	}
</script>

<style lang="scss">
	.onLoad{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header{
		background-color: #ffffff;
		padding: 10rpx 20rpx;
		&-list{
			margin: 10rpx 0;
		}
		&-btn{
			line-height: 56rpx;
			border-radius: 8rpx;
			color: #409eff;
			background: #ecf5ff;
			border-color: #b3d8ff;
			border: 1rpx solid #3c96f3;
			padding: 5rpx;
			text-align: center;
		}
	}
	.scrollBox {
	  height: calc(100vh - 310rpx);
	  overflow-y: auto;
	}
	.orderNotCarList{
		margin-top: 150rpx;
		text-align: center;
	}
	.orderCarList{
		margin: 20rpx;
		background-color: #ffffff;
	}
	.box{
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		margin-bottom: 20rpx;
		border: 1px solid #dcd7d7;
		.list{
			display: flex;
			justify-content: space-between;
			line-height: 56rpx;
			&-name{
				
			}
			&-value{
				
			}
		}
	}
</style>